<template>
    <!-- 终止并新增 -->
    <a-form layout="vertical" ref="ruleFormRef" :model="changePlan" :rules="rules">
        <a-row>
            <a-col :span="24">
                <a-form-item label="计划终止的版本" name="end">
                    <a-row v-if="disabled">
                        <a-col :span="24">
                            <div v-for="item of changePlan.end" :key="item.id">{{ item.versionNumber }}——{{ item.versionName }}</div>
                        </a-col>
                    </a-row>
                    <a-checkbox-group v-model:value="endVersion" @change="checkChange" v-else>
                        <a-row>
                            <a-col :span="24">
                                <a-checkbox v-for="item of list" :key="item.id" :value="item">
                                    {{ item.versionNumber }}——{{ item.versionName }}
                                </a-checkbox>
                            </a-col>
                        </a-row>
                    </a-checkbox-group>
                </a-form-item>
                <a-form-item label="计划开始的版本" name="add">
                    <div style="width: 320px">
                        <flexbox>
                            <template v-if="disabled">
                                <span v-for="item of changePlan.add" :key="item.versionId"> {{ item.versionName }}—{{ item.versionNumber }} </span>
                            </template>

                            <h-search-select-cell
                                :default-value="{
                                    label: `${changePlan.add[0] ? changePlan.add[0].versionName + '-' + changePlan.add[0].versionNumber : ''}`,
                                    id: changePlan.add[0].versionId,
                                }"
                                type="version"
                                keyField="id"
                                valueLabelField="label"
                                :searchQuery="versionSearchQuery"
                                @success="handleSelectChange"
                                v-else
                            >
                                <template #label="{ record }"> {{ record.versionName }}—{{ record.versionNumber }} </template>
                            </h-search-select-cell>
                            <a @click="showDetail" v-if="changePlan.add && changePlan.add.length" style="width: 100px; margin-left: 8px">查看详情</a>
                        </flexbox>
                    </div>
                </a-form-item>
            </a-col>
        </a-row>
    </a-form>
</template>

<script lang="ts">
import { useRouter } from 'vue-router';
import { HSearchSelectCell } from '@/components';
import { defineComponent, ref, unref, reactive, toRefs, computed } from 'vue';
export default defineComponent({
    name: 'PlanEndAndAdd',
    components: {
        HSearchSelectCell
    },
    props: {
        detail: { type: Object, default: () => ({}) },
        disabled: { type: Boolean, default: false }
    },
    setup(props) {
        const router = useRouter();
        const ruleFormRef = ref<any>();
        const state = reactive<any>({
            endVersion: [], // 终止的版本,用于回显
            addVersion: [], // 新增的版本，用于回显
            changePlan: {
                add: [],
                end: []
            },
            list: []
        });
        const rules = computed(() => {
            const rules = {
                end: [{ required: true, message: '终止版本不能为空', trigger: 'blur', type: 'array' }],
                add: [{ required: true, message: '新增版本不能为空', trigger: 'blur', type: 'array' }]
            };
            return props.disabled ? {} : rules;
        });
        const versionSearchQuery = computed(() => {
            return {
                system: props.detail.pmpProductDetailDTO.id
            };
        });
        // 通用选择回调
        const handleSelectChange = (val) => {
            const { id: versionId, versionName, versionNumber } = val;
            state.changePlan = {
                ...state.changePlan,
                add: [{ versionId, versionName, versionNumber }]
            };
        };
        const checkChange = (val: any) => {
            if (val.length) {
                state.changePlan = {
                    ...state.changePlan,
                    end: val.map(({ id: versionId, versionName, versionNumber, instanceId }) => ({
                        versionId,
                        versionName,
                        versionNumber,
                        instanceId
                    }))
                };
            } else {
                state.changePlan = {
                    ...state.changePlan,
                    end: {}
                };
            }
        };
        const validate = () => {
            return new Promise((resolve) => {
                unref(ruleFormRef)
                    .validate()
                    .then(
                        () => {
                            resolve(true);
                        },
                        () => {
                            resolve(false);
                        }
                    );
            });
        };
        const showDetail = () => {
            const id = state.changePlan.add[0].versionId;
            router.push({
                path: '/version/versionDetail',
                query: {
                    id
                }
            });
        };
        const init = () => {
            state.list = props.detail.versionDTOS;
            if (props.detail.changePlan) {
                state.changePlan = {
                    add: props.detail.changePlan.add || [],
                    end: props.detail.changePlan.end
                };
                const { add, end } = state.changePlan;
                if (add.length) {
                    state.addVersion = add;
                }
                if (end.length) {
                    state.endVersion = state.list.filter((item) => end.find((elem) => elem.versionId === item.id));
                }
            }
        };
        init();
        return {
            ruleFormRef,
            ...toRefs(state),
            rules,
            versionSearchQuery,
            handleSelectChange,
            showDetail,
            checkChange,
            validate
        };
    }
});
</script>

<style scoped>
</style>